<template>
<!--  选择设备-->
  <div class="app-container">
    <el-dialog
      title="选择设备"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      :before-close="close"
      width="900px">
      <el-form :model="selectForm" :inline="true">
        <el-form-item label="设备编号：">
          <el-input size="small" v-model="selectForm.deviceCode" placeholder="请输入设备编号" clearable/>
        </el-form-item>
        <el-form-item label="设备名称：">
          <el-input size="small" v-model="selectForm.deviceName" placeholder="请输入设备名称" clearable/>
        </el-form-item>
        <!-- <el-form-item label="存放位置：">
          <el-select v-model="selectForm.placeStorage" placeholder="请选择" multiple >
            <el-option :value="selectForm.placeStorage" class="option">
              <el-tree :data="treedata" default-expand-all show-checkbox check-strictly node-key="id"
                       ref="tree" highlight-current :props="defaultProps"
                       @check-change="handleCheckChange"></el-tree>
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="所属部门：">
          <el-select v-model="selectForm.departmentId" placeholder="请选择" multiple >
            <el-option :value="selectForm.departmentId" class="option">
              <el-tree :data="treedata" default-expand-all show-checkbox check-strictly node-key="id"
                       ref="treed" highlight-current :props="defaultProps"
                       @check-change="handleCheckChanged"></el-tree>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="selectForm.pageNum=1;getList();">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="list" border stripe
                highlight-current-row>
        <el-table-column align="center" label=""  width="55">
          <template slot-scope="scope">
             <el-radio v-model="info" :label="scope.row"><span></span></el-radio>
          </template>
        </el-table-column>
        <el-table-column align="center" type="index" label="序号" width="55"/>
        <el-table-column align="center" label="设备编号" prop="deviceCode" :show-overflow-tooltip="true"/>
        <el-table-column align="center" label="设备名称" prop="deviceName" :show-overflow-tooltip="true"/>
        <el-table-column align="center" label="设备品牌" prop="deviceBrandsName" :show-overflow-tooltip="true"/>
        <el-table-column align="center" label="设备型号" prop="deviceModel"/>
        <el-table-column align="center" label="存放位置" prop="repositoryName"/>
        <el-table-column align="center" label="所属部门" prop="deptName"/>
      </el-table>
      <pagination
        :total="total"
        :page.sync="selectForm.pageNum"
        :limit.sync="selectForm.pageSize"
        @pagination="getList"
      />
      <span slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" @click="determine">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {deviceList} from '@/api/scrap/index'


  export default {
    name: "conservePlanAddDialog.vue",
    props: ['jihuaData'],
    data() {
      return {
        dialogTableVisible: true,
        loading: false,//加载
        treedata:[],
        defaultProps: {
          children: "children",
          label: "label"
        },

        selectForm: {
          pageNum: 1,
          pageSize: 5,
        },//查询条件
        list: [],//数据
        total: 0,
        info:null,
        selectDate: '',//时间
      }
    },

    created() {
      //console.log('jieshou',this.jihuaData)
      this.getTreeselect()
      this.getList()
    },
    methods: {
      //确定
      determine(){
        if(!this.info){
          this.$message.warning('请选择行')
          return false
        }
        
        this.$emit('chooseInfo',this.info)//将submitModel的值传给父组件
      },
      async getList() {
        this.loading = true
        let res = await deviceList(this.selectForm)
        this.list = res.rows
        this.total = res.total
        this.loading = false
      },
      /** 查询类别下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.treedata =  response.data;
        });
      },
      handleCheckChange(data, checked, node) {
        var res =this.$refs.tree.getCheckedNodes()
        var labelArr=[]
        var keyArr = []
        for (var i=0;i<res.length;i++ ){
          labelArr.push(res[i].label)
          keyArr.push(res[i].id)
        }
        this.selectForm.placeStorage = labelArr;
      },
      handleCheckChanged(data, checked, node) {
        var res =this.$refs.treed.getCheckedNodes()
        var labelArr=[]
        var keyArr = []
        for (var i=0;i<res.length;i++ ){
          labelArr.push(res[i].label)
          keyArr.push(res[i].id)
        }
        this.selectForm.department= labelArr;
      },
      close() {
        this.$emit('selectChange')
      },
     
    }
  }
</script>

<style scoped>
  .bule {
    color: #2196F3;
    cursor: pointer
  }
  .option{
      height:auto;
  }

</style>

